<template>
  <div>
    <!-- 顶部导航菜单 -->
    <el-menu mode="horizontal">
      <el-menu-item index="home">首页</el-menu-item>
      <el-menu-item index="products">产品</el-menu-item>
      <el-menu-item index="contact">联系我们</el-menu-item>
    </el-menu>

    <!-- 页面内容 -->
    <el-row>
      <!-- 左侧菜单 -->
      <el-col :span="6">
        <el-menu default-active="products" class="el-menu-vertical">
            <template #title>产品分类</template>
            <el-menu-item index="clothing">服装</el-menu-item>
            <el-menu-item index="electronics">电子产品</el-menu-item>
            <el-menu-item index="furniture">家具</el-menu-item>
        </el-menu>
      </el-col>

      <!-- 右侧内容 -->
      <el-col :span="18">
        <el-carousel :interval="4000">
          <el-carousel-item>
            <img src="carousel1.jpg" alt="轮播图1" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="carousel2.jpg" alt="轮播图2" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="carousel3.jpg" alt="轮播图3" />
          </el-carousel-item>
        </el-carousel>

        <!-- 产品列表 -->
        <el-table :data="productList" style="width: 100%">
          <el-table-column prop="name" label="产品名称"></el-table-column>
          <el-table-column prop="category" label="分类"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 底部内容 -->
    <el-row class="footer">
      <el-col :span="24">
        <slot name="footer-content"></slot>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const productList = ref([
      { name: "T恤", category: "服装", price: 19.99 },
      { name: "智能手机", category: "电子产品", price: 499.99 },
      { name: "沙发椅", category: "家具", price: 299.99 },
    ]);

    return {
      productList,
    };
  },
};
</script>

<style>
/* 自定义样式 */
.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}
</style>
